今天，我們會介紹這次專案對我來說比較難的有挑戰的點，接著再將功能細分規劃實作。將一個大項目拆成很多小項目也是一個必要的技能。

挑戰點

我背景是在工廠擔任研發工程師，我想如果有待過工廠或是工作一段時間要寫KPI之類的話，應該對紅綠燈評估法不陌生吧。

紅綠燈評估方法

紅綠燈評估是一種常見的風險管理方法，主要用來快速視覺化當前工作或項目的狀態。這種方法通常被稱為 RAG Status (Red-Amber-Green) 狀態報告，表示風險或工作進度的「紅燈」、「黃燈」、「綠燈」。它能幫助管理者或團隊成員更容易識別問題、風險或需要優先解決的事項。

• 紅燈（Red）🔴：表示有高風險或重大問題，沒使用過或學習過，需要花很多時間學習。
• 黃燈（Amber）🟡：表示有潛在風險或問題，有用過但不太熟悉
• 綠燈（Green）🟢：表示沒什麼問題，很熟悉。

挑戰點評估表格

整體對我來說，算是滿多有新的領域要學習實作。但我本人滿喜歡學習和實作新的東西，應該不會是太大的問題。

功能拆分

要做一個很大的專案的時候，把功能拆細一點除了比較好管理以外，我個人覺得有助於完成目標。比較不會有，哇～好大不知道從哪裡下手的感覺。

把功能才細一點，也會比較有成就感，慢慢地完成一件又一件小小的事情累積起來的那種成就感。這件事對我來說滿重要的。

協作能力：
如果專案不是只有你一個人獨立開發，有其他的人。那麼把項目拆小是一件很重要的事。方便和其他人一起協作，檢視劃分工作。但這個時候拆的功能細度和說明就要更詳細了。

像是公司愛用的Jira（如下圖），就可以更好的管理各位成員的進度狀況。

我們功能分成下面幾個部分

功能 1：用戶登入

前端部分：

• 登入頁面設計與實作：
  • 實現簡單的登入與註冊介面，。
  • 使用 React Native，並選擇合適的 UI 套件。
• 前端狀態管理：
  • 使用 Redux Toolkit 管理登入狀態，處理使用者登入後的 Token 儲存。
  • 設定前端與後端的 API 溝通。

後端部分：

• 後端 API 實作：
  • 使用 Nest.js 創建會員系統，並實現登入功能。
  • 建立 JWT 驗證，確保用戶登入時能獲取 Token。
  • 使用 MongoDB 儲存和驗證用戶資料。

功能 2：事故報告表單

前端部分：

• 表單頁面設計：
  • 設計多步驟的事故報告表單頁面，包含上傳照片（如駕駛證、車輛行照）。
  • 使用 React Native Camera 實現照片拍攝和上傳功能。
• 表單數據管理：
  • 使用 Redux Toolkit 管理表單提交狀態，並驗證用戶輸入的數據是否正確。

後端部分：

• 後端 API 實作：
  • 使用 Nest.js 實現報告表單的 CRUD API。
  • 將上傳的照片存儲在 AWS S3，並提供相應的 API 進行讀取。
  • 對表單數據進行驗證和處理，確保數據完整且正確。

功能 3：PDF 預覽與匯出

前端部分：

• PDF 預覽與下載：
  • 在前端實現 PDF 預覽功能，使用 React Native PDF 顯示用戶提交的報告內容。
  • 提供下載或分享 PDF 文件的選項，讓用戶可以保存自己的報告。

後端部分：

• 後端 PDF 生成：
  • 使用 Nest.js 生成報告的 PDF 文件，將表單資料填入模板中。
  • 透過 API 將生成的 PDF 傳送到前端，供用戶進行預覽和下載。

功能 4：照片上傳與 OCR 辨識

前端部分：

• 上傳照片與預覽：
  • 在事故報告表單中，實現上傳駕駛證和車輛行照的功能。
  • 使用 React Native Camera 實現拍照並顯示照片預覽。

後端部分：

• OCR 辨識與處理：
  • 使用 AWS Textract 進行照片中的文字識別，並提取駕駛證和行照中的關鍵數據。
  • 將識別出的資料回傳給前端，進行自動填表。

功能 5：部署與 CI/CD

部署部分：

• Docker 打包與部署：
  • 使用 Docker 將後端服務打包，並部署到 AWS EC2 上運行。
  • 確保應用可以穩定運行，並且容易擴展和維護。

CI/CD 部分：

• 自動化流程：
  • 設置 CI/CD 流程，通過 GitHub Actions 自動化測試與部署。
  • 按鍵部署，自動進行測試和部署，確保新功能無錯誤。

總結

總結上面的功能部分，將功能再細分成前後端的工作細項並作成下面的表格，大致上後面的挑戰會依據這個順序將這個專案完成。

老實說我在寫這個的同時，我這個專案只做到一半而已。主要方向會是我把關鍵技術拿出來講解。如果有不明白或是想瞭解更多的，歡迎留言和我說，我之後可以再補充甚至可以給大家範例碼。